如何在 react 表达式中传入 react node[] (节点数组)

我们知道 jsx 表达式允许插入reactNode以及ReactNode[]，当但我们传入一个类似的东西的时候他却会报错：

<div className='App'>
  {
    <p>aaa</p>
    <p>bbb</p> // ❌ JSX expressions must have one parent element
  }
</div>

但是我们明明可以使用 map 函数传入数组呀！

<div className="App">
  {arr.map((num) => (
    <p key={num}>{num}</p>
  ))}
</div>

如果我们希望手动在表达式中传入一个节点数组我们应该怎么做呢？当我遇到这种奇葩问题的时候我也是愣了一会的，经过我对Array.map()方法的观察，我突然顿悟，如果想要手动传入一个节点数组应该这么写：

<div className="App">{[<p>aaa</p>, <p>bbb</p>]}</div>

但是回头想想这个问题奇怪的很，我们明明可以写成：

<div className="App">
  <p>aaa</p>
  <p>bbb</p>
</div>

但是其实有时候我们真的会需要手动的传入一个node[]，比如有些组件可能只接受一个节点数组而你又只有有限个节点不希望使用map()，或者是调试时候使用，再或者是希望在渲染列表中加入几个与之前的节点结构不同的节点，比如以下这个实例：

<div className="App">
  {arr.map((num) => <p key={num}>{num}</p>)
    .concat([<p>aaa</p>, <p>bbb</p>])}
</div>

以上就是如何使用reactNode[]的一点个人心得咯